<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link href="../css/test.css" rel="stylesheet">
    <title>Products</title>
</head>
<body>
<header th:replace="common/top.html"></header>
<section class="content">
    <main>
        <div class="container">
            <nav class="navbar" role="navigation" aria-label="main navigation">
                <div class="navbar-brand">
                    <!-- navbar items, navbar burger... -->
                </div>
                <div class="navbar-menu">
                    <!-- navbar start, navbar end -->
                    <div class="navbar-start">
                        <div class="title">Products</div>
                    </div>
                    <div class="navbar-end">
                        <a href="/catalog/onshelf" class="button is-info">上架商品</a>
                    </div>
                </div>
            </nav>

            <section class="section">
                <form action="/product/getSpecialProduct" method="post">
                    <div class="field">
                        <label for="productName" class="label">Product Search</label>
                    </div>

                    <div class="field has-addons">

                        <div class="control is-expanded">
                            <input class="input" type="text" id="productName" name="productName" placeholder="Find a product">
                        </div>
                        <div class="control">
                            <a class="button is-primary">
                                Search
                            </a>
                        </div>
                    </div>
                    <!--    <input name="categoryName" type="text" th:text="${categoryName}" th:value="${categoryName}" disabled>-->
                    <!--                <div class="form-group">-->
                    <!--                    <label for="productName" class="col-sm-2 control-label">productName:</label>-->
                    <!--                    <div class="col-sm-10">-->
                    <!--                        <input type="text" name="productName" class="form-control" id="productName"-->
                    <!--                               placeholder="input the name of product to search">-->
                    <!--                    </div>-->

                    <!--                    <div class="form-group">-->
                    <!--                        <div class="col-sm-offset-2 col-sm-10">-->
                    <!--                            <button type="submit" class="btn btn-default">search</button>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                    <!--                </div>-->
                </form>
            </section>
            <table id="product" class="table table-bordered table-striped table-hover">
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Operations</th>
                </tr>
                <tr th:each="product:${session?.productList}">
                    <td>
                        <a th:href="@{/item/getItemView(productId=${product.productId})}" th:text="${product.name}"></a>
                    </td>
                    <td th:utext="${product.description}"></td>
                    <td>
                        <a th:href="@{/product/deleteProduct(categoryName=${product.categoryId},productId=${product.productId},delete=${3})}">deleteProduct</a>
                    </td>
                </tr>

            </table>


            <a href="/product/toaddProduct">新增 Product</a></br>
        </div>
    </main>
</section>
<header th:replace="common/bottom.html"></header>

</body>
</html>